@import "./common.scss";
@import "./mixins.scss";
//button
$--button-font-size: $--font-size-base !default;
$--button-font-weight: $--font-weight-primary !default;
$--button-primary-font-color: $--color-white !default;

$--button-default-background-color: $--color-white !default;
$--button-default-font-color: $--color-text-regular !default;
$--button-padding-vertical: 12px !default;
$--button-padding-horizontal: 20px !default;
$--button-border-radius: $--border-radius-base !default;

$--button-primary-border-color: $--color-primary !default;
$--button-primary-font-color: $--color-white !default;
$--button-primary-background-color: $--color-primary !default;
$--button-success-border-color: $--color-success !default;
$--button-success-font-color: $--color-white !default;
$--button-success-background-color: $--color-success !default;
$--button-warning-border-color: $--color-warning !default;
$--button-warning-font-color: $--color-white !default;
$--button-warning-background-color: $--color-warning !default;
$--button-danger-border-color: $--color-danger !default;
$--button-danger-font-color: $--color-white !default;
$--button-danger-background-color: $--color-danger !default;

$--button-active-shade-percent: 10% !default;

$--button-medium-font-size: $--font-size-base !default;
/// borderRadius||Border|2
$--button-medium-border-radius: $--border-radius-base !default;
/// padding||Spacing|3
$--button-medium-padding-vertical: 10px !default;
/// padding||Spacing|3
$--button-medium-padding-horizontal: 20px !default;

/// fontSize||Font|1
$--button-small-font-size: 12px !default;
$--button-small-border-radius: #{$--border-radius-base - 1} !default;
/// padding||Spacing|3
$--button-small-padding-vertical: 9px !default;
/// padding||Spacing|3
$--button-small-padding-horizontal: 15px !default;

/// fontSize||Font|1
$--button-large-font-size: 12px !default;
$--button-large-border-radius: #{$--border-radius-base - 1} !default;
/// padding||Spacing|3
$--button-large-padding-vertical: 15px !default;
/// padding||Spacing|3
$--button-large-padding-horizontal: 25px !default;

@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}

@mixin button-variant($color, $background-color, $border-color) {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;

  &:hover,
  &:focus {
    background: mix($--color-white, $background-color, 20%);
    border-color: mix($--color-white, $border-color, 20%);
    color: $color;
  }

  &.is-active,
  &:active {
    background: mix(
      $--color-black,
      $background-color,
      $--button-active-shade-percent
    );
    border-color: mix(
      $--color-black,
      $border-color,
      $--button-active-shade-percent
    );
    color: $color;
  }

  &:active {
    outline: none;
  }
}

@include b(button) {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $--button-default-background-color;
  color: $--button-default-font-color;
  -webkit-appearance: none;
  text-align: center;
  border: $--border-base;
  border-color: $--button-default-border-color;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  font-weight: $--button-font-weight;
  & + & {
    margin-left: 10px;
  }

  @include button-size(
    $--button-padding-vertical,
    $--button-padding-horizontal,
    $--button-font-size,
    $--button-border-radius
  );

  &:hover,
  &:focus {
    color: $--color-primary;
    border-color: mix($--color-white, $--color-primary, 70%);
    background-color: mix($--color-white, $--color-primary, 90%);
  }

  @include m(medium) {
    @include button-size(
      $--button-medium-padding-vertical,
      $--button-medium-padding-horizontal,
      $--button-medium-font-size,
      $--button-medium-border-radius
    );
  }
  @include m(small) {
    @include button-size(
      $--button-small-padding-vertical,
      $--button-small-padding-horizontal,
      $--button-small-font-size,
      $--button-small-border-radius
    );
  }
  @include m(large) {
    @include button-size(
      $--button-large-padding-vertical,
      $--button-large-padding-horizontal,
      $--button-large-font-size,
      $--button-large-border-radius
    );
  }
  @include m(primary) {
    @include button-variant(
      $--button-primary-font-color,
      $--button-primary-background-color,
      $--button-primary-border-color
    );
  }
  @include m(success) {
    @include button-variant(
      $--button-success-font-color,
      $--button-success-background-color,
      $--button-success-border-color
    );
  }
  @include m(danger) {
    @include button-variant(
      $--button-danger-font-color,
      $--button-danger-background-color,
      $--button-danger-border-color
    );
  }
}
